<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="../css/personal_center.css">
    <link rel="stylesheet" href="../css/flex.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <style>
        .layui-card-header{
            padding-left: 15px!important;
            line-height: 45px;
        }
        .layui-icon{
            font-size: 14px;
        }
        .offer_price_mask {
            background-color: #000;
            opacity: 0.6;
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 20;
        }

        .content_offer_price {
            background-color: #fff;
            position: fixed;
            width: 800px;
            height: 360px;
            z-index: 35;
            left: 50%;
            margin-left: -400px;
            top: 50%;
            margin-top: -180px;
        }

        .content_offer_price .title {
            line-height: 45px;
            background: #eee;
            padding-left: 10px;
            margin-bottom: 20px;
        }

        .content_offer_price .list {
            padding: 0 10px;
            margin-bottom: 20px;
        }
        .content_offer_price table{
            margin-top: 10px;
            width: 100%;
        }
        .content_offer_price table th{
            background-color: #f1f1f1;
        }
        .content_offer_price table th,.content_offer_price table td{
            height: 38px;
            text-align: center;
            border: 1px solid #eee;
            padding: 5px;
        }
        .dis-inblock {
            display: inline-block;
        }
    </style>
</head>
<body>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html" frameborder="0"></iframe>
    </div>-->
  <div class="right-box">
        <div class=" flex-row-start" id="personal-manage" v-cloak>
            <!-- 个人中心主内容 -->
            <div class="personal-manage" >
                <div class="base-info layui-card flex-row-start-stretch">
                    <!--<div class="flex-row-start-stretch">-->
                    <div class="store-img-wrapper">
                        <img :src="storeInfo.picUrl?imgBaseUrl+storeInfo.picUrl:'../img/personal-center/default-avatar.png'" class="admin_logo" alt="">
                    </div>
                    <div class="store-info">
                        <div class="operation flex-row-space-between">
                            <div>
                                <label>{{storeInfo.companyName}}</label>
                                <img src="../img/personal-center/authorized.png" alt="">
                            </div>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" onclick="location.href = 'change_linkSty.html'">完善资料</button>
                        </div>
                        <div style="margin-top: 10px;">
                            <label class="status-label">店铺状态：</label>
                            <span class="status-name">{{storeStatus}}</span>
                        </div>
                    </div>
                    <div class="statistics-wrapper flex-row-space-around">
                        <!--<div class="count-wrapper flex-row-start">-->
                        <div class="count flex-column-center">
                            <img src="../img/personal-center/pageview.png" alt="">
                            <label>{{pageViews}}</label>
                            <span>店铺浏览量</span>
                        </div>
                        <div class="count flex-column-center">
                            <img src="../img/personal-center/product-view.png" alt="">
                            <label>{{productFlow}}</label>
                            <span>产品流量</span>
                        </div>
                        <div class="count flex-column-center">
                            <img src="../img/personal-center/login-sum.png" alt="">
                            <label>{{loginCount}}</label>
                            <span>商品关注数</span>
                        </div>
                        <!--</div>-->
                    </div>
                    <!--</div>-->
                </div>
                <div class="latest-offer layui-card">
                    <div class="layui-card-header flex-row-space-between">
                        <div class="card-title">
                            <img src="../img/personal-center/offer-price.png" alt="">
                            <span>最新询报价</span>
                        </div>
                        <a href="my_no_offer.html">
                            <div class="see-more cur-p">
                                查看更多
                                <i class="layui-icon layui-icon-right"></i>
                            </div>
                        </a>
                    </div>
                    <div class="layui-card-body">
                        <div v-if="offerList.length < 1" class="empty-data">
                            <img src="../img/personal-center/empty-data.png" alt="">
                            <p>暂无数据</p>
                        </div>
                        <div class="table-list">
                            <table>
                                <thead>
                                <tr>
                                    <th style="width: 33%">询价标题</th>
                                    <th style="width: 33%">品类</th>
                                    <th style="width: 33%">询价时间</th>
                                    <th class="width_120">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in offerList">
                                    <td>{{item.name}}</td>
                                    <td>{{item.commodityType}}</td>
                                    <td>{{item.crtTime}}</td>
                                    <td>
                                        <!--<div class="colo-blue cur-p">查看详情</div>-->
                                        <!--<div class="colo-blue cur-p" @click="operation(item.state,item.id)">{{item.state==0?'关闭询价':'打开询价'}}</div>-->
                                        <div class="colo-blue cur-p" data-value="1"
                                             @click="offerProduct(1,item.id,item.storeName,item.crtTime,item.qq,item.storeId,item.name,item.userUrl,item.productionPlace)">去报价
                                        </div>
                                        <div class="colo-blue cur-p" data-value="0" @click="offerProduct(0,item.id,item.storeName,item.crtTime,item.qq,item.storeId,item.name,item.userUrl,item.productionPlace)">
                                            查看详情
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                            <div id="test1" class="text-r"></div>
                        </div>

                    </div>
                </div>
                <div class="commodity-manage layui-card">
                    <div class="layui-card-header card-title">
                        <img src="../img/personal-center/product-manage.png" alt="">
                        <span>商品管理</span>
                    </div>
                    <div class="layui-card-body card-content">
                        <div class="flex-row-start-space-around">
                            <div class="sum-wrapper">
                                <p>商品概况：</p>
                                <dl class="flex-row-start">
                                    <dd>出售中（<span class="num">{{productStatusSum.inSale}}</span>）</dd>
                                    <dd>已下架（<span class="num">{{productStatusSum.forceOffSale}}</span>）</dd>
                                </dl>
                            </div>
                            <!--<div class="sum-wrapper">-->
                            <!--<p>品类/车型筛选：</p>-->
                            <!--<dl>-->
                            <!--<dd>可筛选的产品（<span>{{filterSum.can}}</span>）</dd>-->
                            <!--<dd>不能筛选的产品（<span>{{filterSum.notCan}}</span>）</dd>-->
                            <!--</dl>-->
                            <!--</div>-->
                            <!--<div class="sum-wrapper">-->
                            <!--<p>商品星级：</p>-->
                            <!--<dl>-->
                            <!--<dd>一星（<span>{{productStarSum.oneStar}}</span>）</dd>-->
                            <!--<dd>二星（<span>{{productStarSum.twoStar}}</span>）</dd>-->
                            <!--<dd>三星（<span>{{productStarSum.threeStar}}</span>）</dd>-->
                            <!--<dd>四星（<span>{{productStarSum.fourStar}}</span>）</dd>-->
                            <!--<dd>五星（<span>{{productStarSum.fiveStar}}</span>）</dd>-->
                            <!--</dl>-->
                            <!--</div>-->
                            <div class="sum-wrapper flex-row-start">
                                <div class="">
                                    <p>授权品牌：</p>
                                    <span v-if="brandList.length === 0">您还未提交授权品牌</span>
                                    <dl v-else  class="flex-row-start"></dl>

                                </div>
                                <div class="btn-wrapper">
                                    <button type="button" class="submit-brand-btn" onclick="location.href = 'apply_brand.html'">立即提交</button>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
                <div class="deal-manage layui-card">
                    <div class="layui-card-header card-title">

                        <img src="../img/personal-center/deal-manage.png" alt="">
                        <span>卖家交易管理</span>
                    </div>
                    <div class="deal-manage-list flex-row-start">
                        <div class="before-deal">
                            <div class="deal-type-title"><p >交易前</p></div>
                            <dl>
                                <dd>全部订单</dd>
                            </dl>
                        </div>
                        <div class="in-deal">
                            <div class="deal-type-title"><p>交易中</p></div>
                            <dl>
                                <dd>待确认（<span class="num">{{inDeal[0]}}</span>）</dd>
                                <dd>待买家付款（<span class="num">{{inDeal[0]}}</span>）</dd>
                                <dd>待发货（<span class="num">{{inDeal[0]}}</span>）</dd>
                                <dd>待买家确认收货（<span class="num">{{inDeal[0]}}</span>）</dd>
                            </dl>
                        </div>
                        <div class="after-deal">
                            <p class="deal-type-title">交易后</p>
                            <dl>
                                <dd>待回复评价（<span class="num">{{inDeal[0]}}</span>）</dd>
                                <dd>待处理退款（<span class="num">{{inDeal[0]}}</span>）</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 右边侧边栏 -->
            <!--<div class="right-info">-->
                <!--<div class="info-box">-->
                    <!--<div class="info-title-wrapper">公告</div>-->
                    <!--&lt;!&ndash; 向下的三角形 &ndash;&gt;-->
                    <!--<div class="triangle-down">-->
                        <!--<span></span>-->
                    <!--</div>-->
                    <!--<ul>-->
                        <!--<li v-for="(info, infoI) in noticeList" :key="info.id" :class="[info.isRead ? '': 'theme-color']">-->
                            <!--<div>-->
                                <!--<span class="diamond" v-if="!info.isRead"></span>-->
                            <!--</div>-->
                            <!--{{ info.title }}-->
                        <!--</li>-->
                    <!--</ul>-->
                <!--</div>-->
                <!--<div class="info-box">-->
                    <!--<div class="info-title-wrapper">帮助中心</div>-->
                    <!--&lt;!&ndash; 向下的三角形 &ndash;&gt;-->
                    <!--<div class="triangle-down">-->
                        <!--<span></span>-->
                    <!--</div>-->
                    <!--<ul>-->
                        <!--<li v-for="(info2, infoI2) in helpList" :key="info2.id" :class="[info2.isRead ? '': 'theme-color']">-->
                            <!--<div>-->
                                <!--<span class="diamond" v-if="!info2.isRead"></span>-->
                            <!--</div>-->
                            <!--{{ info2.title }}-->
                        <!--</li>-->
                    <!--</ul>-->
                <!--</div>-->
                <!--<div class="info-box">-->
                    <!--<div class="info-title-wrapper" style="background-color: #02a867">微信公众号</div>-->
                    <!--&lt;!&ndash; 向下的三角形 &ndash;&gt;-->
                    <!--<div class="triangle-down" style="border-color: #02a867 transparent transparent;">-->
                        <!--&lt;!&ndash;<span></span>&ndash;&gt;-->
                    <!--</div>-->
                    <!--<img src="" alt="">-->
                <!--</div>-->
            <!--</div>-->
            <div class="content_offer_price hide content_offer_price_01">
                <div class="title"><span class="c_000">去报价</span><span class="icon_close close_mode"></span></div>
                <div class="clearfix showInquireDetail">

                    <div class="fl mr-28">
                        <div class="fl"><img :src="imgBaseUrl + userUrl" v-if="userUrl" alt="" class="img-sty1"><img v-if="!userUrl" src="../img/store-home.jpg" alt="" class="img-sty1"></div>
                        <div class="fl">
                            <div class="mb10 c_000">{{storeName}}<span class="icon_store_sty" style="top:3px;left: 10px;"></span></div>
                            <div class="c_000">询价时间： <span class="c_666">{{crtTime}}</span></div>
                        </div>
                    </div>
                    <div class="fl">
                        <div class="fl">
                            <div class="c_000 mb10">公司地址： <span class="c_666">{{address}}</span></div>
                            <div class="c_000">询价清单： <span class="c_666">{{name}}</span></div>
                        </div>
                    </div>
                    <div class="fr link-right">
                        <div class="text-c">
                            <a target="_blank" :href="'http://wpa.qq.com/msgrd?v=3&uin='+qq+'&site=qq&menu=yes'">
                                <img src="../img/QQ.png" class="qq-box1" align="absmiddle">
                            </a>
                        </div>
                        <div class="text-c c_000">联系对方</div>
                    </div>
                </div>
                <div class="list" v-if="hideModal">
                    <!--<span>填写价格：</span>-->
                    <table>
                        <thead>
                        <tr>
                            <th>询价清单</th>
                            <th>报价</th>

                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>{{name}}</td>
                            <td>
                                <div class="dis-inblock">
                                    <input type="text" class="layui-input js-getAmount" placeholder="填写您的报价">
                                </div>
                            </td>

                        </tr>
                        </tbody>
                    </table>


                </div>
                <div v-if="hideModal">
                    <div class="text-c"><span class="btn-sty11 js-offerPrice">提交报价</span></div>
                </div>
            </div>

            <div class="content_offer_price hide content_offer_price_02">
                <div class="title"><span class="c_000">待报价详情</span><span class="icon_close close_mode"></span></div>
                <div class="clearfix showInquireDetail">

                    <div class="fl mr-28">
                        <div class="fl">
                            <img :src="imgBaseUrl + userUrl" v-if="userUrl" alt="" class="img-sty1"><img v-if="!userUrl" src="../img/store-home.jpg" alt="" class="img-sty1">
                        </div>
                    </div>
                    <div class="fl">
                        <div class="fl">
                            <div class="c_000 mb10">公司地址： <span class="c_666">{{address}}</span></div>
                            <div class="c_000">询价清单： <span class="c_666">{{name}}</span></div>
                        </div>
                    </div>
                    <div class="fr link-right">
                        <div class="text-c">
                            <a target="_blank" :href="'http://wpa.qq.com/msgrd?v=3&uin='+qq+'&site=qq&menu=yes'">
                                <img src="../img/QQ.png" class="qq-box1" align="absmiddle">
                            </a>
                        </div>
                        <div class="text-c c_000">联系对方</div>
                    </div>
                </div>
                <div class="clearfix showInquireDetail" style="border-top: 1px solid #e5e5e5;padding: 15px 10px;">
                    <div class="fl">
                        <div class="c_000 mb10">公司地址： <span class="c_666">{{address}}</span></div>
                        <div class="c_000">询价清单： <span style="color: #fb6a30;">{{name}}</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="offer_price_mask hide"></div>

<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script>
    //    if(Token){
    //        $('.login-0').hide();
    //        $('.login-name').html(localStorage.getItem('username'));
    //    }else{
    //        $('.login-1').show();
    //    }
    //
    //    $("body").on("click",".loginOut",function () {
    //        localStorage.removeItem("Token");
    //        localStorage.removeItem("userId");
    //        localStorage.removeItem("storeId");
    //        noNeedLogin.indexOf(pageName(window.location.href)) == -1?location.href = "login.html":location.reload()
    //    })

    //    $(document).on('click','.js-release',function(){
    //        window.open('choose-class.html');
    //    })
    var postData = {
        limit: 6,
        offset: 1,
        type: '',
        name:'',
    }
    var personalManageVue = new Vue({
        el:'#personal-manage',
        data:{
            storeStatus:'审核通过',
            pageViews:12,
            productFlow:12,
            loginCount:1,
            productStatusSum:{'inSale':0,'inReview':2,'notApproved':1,'forceOffSale':0},
            productStarSum:{'oneStar':0,'twoStar':2,'threeStar':1,'fourStar':0,'fiveStar':0},
            filterSum:{'can':2,'notCan':0},
            authorizedBrand:[],
            inDeal:[0,1,2,3,4],
            afterDeal:[0,1],
            offerList:[],
            brandList:[],
            storeInfo:{},
            imgBaseUrl:imgBaseUrl,
            storeName: '',
            crtTime: '',
            qq: '',
            storeId: '',
            name:'',
            userUrl:'',
            address:'',
            hideModal:true,
        },
        mounted:function(){
            this.getStoreStatistics();
            var that = this;
            get_ajaxPage("/quotation/geQuotationPage", postData, function (data) {
                data.data.forEach(function (item) {
                    item.picUrl = item.picUrl.split(",")[0];
                })
                that.offerList = data.data;
            })
        },
        methods:{
            getStoreStatistics: function(){
                get_ajax('/sys/store/statistics',{},
                    function (data) {
                        console.log(data);
                        personalManageVue.pageViews = data.pageViews;
                        personalManageVue.productStatusSum.inSale = data.onOffer;
                        personalManageVue.productStatusSum.forceOffSale = data.undercarriage;
                        personalManageVue.loginCount = data.goodsFollow;
                    }
                );
                get_ajax('/web/auth/info',{id:localStorage.getItem("storeId")}, function (data) {
                    personalManageVue.storeInfo = data;
                    }
                );
            },
            offerProduct: function (type,id, storeName, crtTime, qq, storeId,name,userUrl,address) {
                if(type==1){
                    this.hideModal = true;
                    $('.content_offer_price_01,.offer_price_mask').fadeIn();
                }else{
                    this.hideModal = false;
                    $('.content_offer_price_02,.offer_price_mask').fadeIn();
                }
                this.id = id;

                this.storeName = storeName;
                this.crtTime = crtTime;
                this.qq = qq;
                this.storeId = storeId;
                this.name = name;
                this.userUrl = userUrl;
                this.address = address;
            }
        }
    });
    $('.offer_price_mask,.icon_close').click(function () {
        $('.content_offer_price,.offer_price_mask').fadeOut();
    })

    $('.js-offerPrice').click(function () {
        if(!$('.js-getAmount').val()){
            layer.msg('请填写报价！');
            return
        }
        get_ajax("/quotation/add", {commodityId: app.id, amount: $('.js-getAmount').val()}, function (data) {
            layer.msg('报价成功！');
            app.getPage();
            $('.content_offer_price,.offer_price_mask').fadeOut();
        })
    })
</script>
</body>
</html>